<template>
    <div class="goods" id="goods" name="goods">
        <!-- 面包屑 -->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item>全部商品</el-breadcrumb-item>
                <el-breadcrumb-item v-show="!search">分类</el-breadcrumb-item>
                <el-breadcrumb-item v-show="search">搜索</el-breadcrumb-item>
                <el-breadcrumb-item v-show="search">{{search}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑END -->

        <!-- 分类标签 -->
        <div class="nav">
            <div class="product-nav">
                <div class="title">分类</div>
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane v-for="item in categoryList"
                                 :key="item.category_id"
                                 :label="item.category_name"
                                 :name="'' + item.category_id"></el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!-- 分类标签END -->

        <!-- 主要内容区 -->
        <div class="main">
            <div class="list">
                <my-list :listData="product" :isMore="true"></my-list>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total"
                        @current-change="currentChange"
                ></el-pagination>
            </div>
            <!-- 分页END -->
        </div>
        <!-- 主要内容区END -->
    </div>
</template>
<script>
    import goodsApi from "../api/goodsApi"
    export default {
        data() {
            return {
                search: "",
                product: [],
                activeName: "0",
                categoryList: [],
                categoryID: [],
                currentPage: 1,
                pageSize: 15,
                total: 0,
            };
        },
        created() {
            this.getCategory();
            //获取全部商品
            this.getProduct("getAllProduct");
        },
        activated() {
            /*let query = this.$route.query;
            console.log("query",query) //{search: "1234"}
//            this.search
            this.search = query.search;*/

            this.activeName = "-1"

        },
        watch: {
            activeName(value){//切换分类
                console.log("监听属性categoryID", value);
                let categoryID = Number(value);
                this.categoryID = [categoryID];

                //每次切换分类都要重置分页数据
                this.currentPage = 1;
                this.total= 0;
                this.search = "";

                //根据分类ID确定是获取所有商品还是单独某一类的商品
                if(categoryID === 0){//获取全部商品
                    this.categoryID = [];
                    this.getProduct("getAllProduct");
                }else {
                    this.getProduct();
                }
            },
            //分页被改变的时候
            currentPage(currentPage){
                if(!this.categoryID.length){
                    this.getProduct("getAllProduct");
                    return
                }
                this.getProduct()
            },
/*            //搜索被触发的时候
            search(value){
                console.log("搜索监听",value);
            },*/
            //监听路由改变
            $route(value){
                console.log(value.query);
                if(value.query.search){
                    this.search = value.query.search;

                    this.getProductBySearch();
                }
            }
        },
        methods: {
            //获取商品分类信息
            async getCategory(){
                let {data: res} = await goodsApi.getCategory();
                this.categoryList = res.category;
                this.categoryList.unshift({
                    category_id: 0,
                    category_name: "全部"
                });
                console.log(this.categoryList)
            },
            //获取所有商品
            async getProduct(apiName="getProductByCategory"){
                let sendData = {
                    categoryID: this.categoryID,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                };
//                let {data: res} = await goodsApi.getAllProduct(sendData);
//                let {data: res} = await goodsApi.getProductByCategory(sendData);
                let {data: res} = await goodsApi[apiName](sendData);
                this.product = res.Product;
                this.total = res.total
            },
            /*//获取分类商品信息
            async getProductByCategory(){
                let sendData = {
                    categoryID: this.categoryID,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                };
                let {data: res} = await goodsApi.getProductByCategory(sendData);
                this.product = res.Product;
                this.total = res.total
            },*/
            // 页码变化调用currentChange方法
            currentChange(currentPage) {
                this.currentPage = currentPage;
            },
            //根据搜索条件获取数据
            async getProductBySearch(){
                let sendData = {
                    search: this.search,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                };
                let {data: res} = await goodsApi.getProductBySearch(sendData);
                this.product = res.Product;
                this.total = res.total;
            }
        }
    };
</script>

<style type="text/scss" lang="scss" scoped>
    .goods {
        background-color: #f5f5f5;
    }

    /* 面包屑CSS */
    .el-tabs--card .el-tabs__header {
        border-bottom: none;
    }

    .breadcrumb {
        height: 50px;
        background-color: white;
        .el-breadcrumb {
            width: 1225px;
            line-height: 30px;
            font-size: 16px;
            margin: 0 auto;
        }
    }

    /* 面包屑CSS END */

    /* 分类标签CSS */
    .nav {
        background-color: white;
        .product-nav {
            width: 1225px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            .title {
                width: 50px;
                font-size: 16px;
                font-weight: 700;
                float: left;
            }
        }
    }

    /* 分类标签CSS END */

    /* 主要内容区CSS */
    .main {
        margin: 0 auto;
        max-width: 1225px;
        .list {
            min-height: 650px;
            padding-top: 14.5px;
            margin-left: -13.7px;
            overflow: auto;
        }
        .pagination {
            height: 50px;
            text-align: center;
        }
        .none-product {
            color: #333;
            margin-left: 13.7px;
        }
    }

    /* 主要内容区CSS END */
</style>